<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>学生信息管理系统</title>
    <!--引入外部的样式文件-->
    <link rel="stylesheet" href="./css/index.css">



    

    <!--引入Element UI样式-->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">


    <!-- 使用cdn引入vue模块-->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>

    <!--引入Element组件库-->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>


    <!-- 引入Axios组件库 -->
    <script src="https://unpkg.com/axios@1.1.2/dist/axios.min.js"></script>

</head>

<body>

    <div id="app">

        <el-container>
            <el-header style="height: 80px;">数学与计算机科学学院-学生信息管理系统</el-header>
            <el-container>
                <el-aside width="200px">
                    <!--侧边栏element-->
                    <el-menu default-active="2" class="el-menu-vertical-demo">
                        <el-menu-item index="1">
                            <i class="el-icon-menu"></i>
                            <span slot="title">班级管理</span>
                        </el-menu-item>
                        <el-menu-item index="2">
                            <i class="el-icon-user"></i>
                            <span slot="title">学生信息</span>
                        </el-menu-item>
                        <el-menu-item index="3">
                            <i class="el-icon-user-solid"></i>
                            <span slot="title">讲师信息</span>
                        </el-menu-item>
                        <el-menu-item index="4">
                            <i class="el-icon-postcard"></i>
                            <span slot="title">课程管理</span>
                        </el-menu-item>
                    </el-menu>
                </el-aside>
                <el-container>
                    <!--面包屑导航element-->
                    <el-main>
                        <el-breadcrumb separator-class="el-icon-arrow-right">
                            <el-breadcrumb-item>首页</el-breadcrumb-item>
                            <el-breadcrumb-item>学生管理</el-breadcrumb-item>
                        </el-breadcrumb>
                        <!--表单,横向排列，把一个横行24等分，四块区域-->
                        <el-form :inline="true" style="margin-top: 20px;">
                            <el-row>
                                <el-col :span="12">
                                    <el-form-item label="请输入查询条件">
                                        <el-input v-model="inputStr" placeholder="输入查询条件"
                                            style="width: 420px;"></el-input>
                                    </el-form-item>
                                </el-col>

                                <el-col :span="8" style="text-align: right;padding-right: 20px;">
                                    <el-button-group>
                                        <el-button type="primary" icon="el-icon-search"
                                            @click="queryStudents()">查询</el-button>
                                        <el-button type="primary" icon="el-icon-tickets"
                                            @click="getAllStudents">全部</el-button>
                                        <el-button type="primary" icon="el-icon-circle-plus-outline"
                                            @click="addStudent">添加</el-button>
                                    </el-button-group>
                                </el-col>

                                <el-col :span="2" style="padding-right: 50px;">
                                    <el-upload :show-file-list="false" :http-request="uploadExcelPost">
                                        <el-button type="primary">导入Excel</el-button>

                                    </el-upload>
                                </el-col>

                                <el-col :span="2" style="padding-left: 10px;">
                                    <el-upload>
                                        <el-button type="primary" @click="exportToExcel()">导出Excel</el-button>
                                    </el-upload>

                                </el-col>
                            </el-row>

                        </el-form>

                        <!--表格-->
                        <el-table :data="pageStudents" border style="width: 100%" size="mini"
                            @selection-change="handleSelectionChange">
                            <el-table-column type="selection">
                            </el-table-column>
                            <el-table-column prop="index" label="序号" width="60">
                            </el-table-column>
                            <el-table-column prop="sno" label="学号" width="100">
                            </el-table-column>
                            <el-table-column prop="name" label="姓名" width="80">
                            </el-table-column>
                            <el-table-column prop="gender" label="性别" width="60">
                            </el-table-column>
                            <el-table-column prop="birthday" label="出生日期" width="100" align="center">
                            </el-table-column>
                            <el-table-column prop="mobile" label="电话" width="120" align="center">
                            </el-table-column>
                            <el-table-column prop="email" label="邮箱" width="200" align="center">
                            </el-table-column>
                            <el-table-column prop="address" label="地址" align="center">
                            </el-table-column>
                            <el-table-column prop="classname" label="班级" width="200" align="center">
                            </el-table-column>
                            <el-table-column label="操作" width="180" align="center">
                                <template slot-scope="scope">

                                    <el-button type="success" icon="el-icon-more" size="mini" circle
                                        @click="viewStudent(scope.row)"></el-button>
                                    <el-button type="primary" icon="el-icon-edit" size="mini" circle
                                        @click="updateStudent(scope.row)"></el-button>
                                    <el-button type="danger" icon="el-icon-delete" size="mini" circle
                                        @click="deleteStudent(scope.row)"></el-button>
                                </template>
                            </el-table-column>
                        </el-table>

                        <!--分页-->
                        <el-row style="margin-top: 20px;">
                            <el-col :span="8" style="text-align: left">
                                <el-button type="danger" icon="el-icon-delete" size="mini"
                                    @click="deleteStudents()">批量删除</el-button>

                            </el-col>

                            <el-col :span="16" style="text-align: right">
                                <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                                    :current-page="currentpage" :page-sizes="[5, 10, 50, 100]" :page-size="pagesize"
                                    layout="total, sizes, prev, pager, next, jumper" :total="total">
                                </el-pagination>

                            </el-col>
                        </el-row>
                        <!--弹出框的学生明细表单-->
                        <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="50%"
                            @close="closeDialogForm" :close-on-click-modal="false">
                            <!--inline方法让表单内容在一行内展示-->

                            <el-form ref="studentForm" :model="studentForm" :rules="rules" :inline="true"
                                style="margin-left:20px ;" label-width="110px" label-position="right" size="mini">


                                <el-upload class="avatar-uploader" 
                                :show-file-list="false" :http-request="uploadPicturePost"  style="text-align: center; margin:20px">
                                <img v-if="studentForm.image" :src="studentForm.imageUrl" class="avatar">
                                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                            </el-upload>
                            


                                <el-form-item label="学号：" prop="sno">
                                    <el-input v-model="studentForm.sno" :disabled="isEdit||isView"
                                        suffix-icon="el-icon-edit"></el-input>
                                </el-form-item>
                                <el-form-item label="姓名：" prop="name">
                                    <el-input v-model="studentForm.name" :disabled="isView"
                                        suffix-icon="el-icon-edit"></el-input>
                                </el-form-item>
                                <el-form-item label="性别：" prop="gender">
                                    <el-select v-model="studentForm.gender" :disabled="isView" placeholder="请选择性别">
                                        <el-option label="男" value="男"></el-option>
                                        <el-option label="女" value="女"></el-option>
                                    </el-select>
                                </el-form-item>
                                <el-form-item label="出生日期：" prop="birthday">
                                    <el-date-picker v-model="studentForm.birthday" value-format="yyyy-MM-dd"
                                        :disabled="isView" type="date" placeholder="选择日期" style="width: 93%;">
                                    </el-date-picker>
                                </el-form-item>
                                <el-form-item label="手机号码：" prop="mobile">
                                    <el-input v-model="studentForm.mobile" :disabled="isView"
                                        suffix-icon="el-icon-edit"></el-input>
                                </el-form-item>
                                <el-form-item label="邮箱地址：" prop="email">
                                    <el-input v-model="studentForm.email" :disabled="isView"
                                        suffix-icon="el-icon-edit"></el-input>
                                </el-form-item>
                                <el-form-item label="家庭住址：" prop="address">
                                    <el-input v-model="studentForm.address" :disabled="isView"
                                        suffix-icon="el-icon-edit" style="width: 130%;"></el-input>
                                </el-form-item>
                                <el-form-item label="班级：" prop="classname">
                                    <el-input v-model="studentForm.classname" :disabled="isView"
                                        suffix-icon="el-icon-edit"></el-input>
                                </el-form-item>
                            </el-form>
                            <span slot="footer" class="dialog-footer">
                                <el-button type="primary" size="mini" v-show="!isView"
                                    @click="submitStudentForm('studentForm')">确 定</el-button>
                                <el-button type="info" size="mini" @click="closeDialogForm('studentForm')">取
                                    消</el-button>
                            </span>


                        </el-dialog>



                    </el-main>
                    <el-footer style="height: 30px;">学生信息管理系统 | 陆凯枫 | 2024-6-8</el-footer>
                </el-container>
            </el-container>
        </el-container>


    </div>

</body>

</html>

<!--导入js文件-->

<script src="js/index.js"></script>